<template>
  <u-modal
    :show="goodDetailModalVisible"
    class="good-detail-modal"
    color="#5A5B5C"
    width="650rpx"
    custom
    padding="0rpx"
    radius="12rpx"
    @confirm="handleAddToCartInModal"
    @close="closeGoodDetailModal"
    confirmText="加入购物车"
    confirmColor="#f0ad4e"
  >
    <view class="modal-content">
      <view class="cover">
        <u-image
          width="260rpx"
          height="260rpx"
          :src="good.images"
          class="image"
        ></u-image>
        <view class="btn-group">
          <up-icon
            @click="closeGoodDetailModal"
            name="close"
            color="#2979ff"
            size="28"
          ></up-icon>
        </view>
      </view>
      <scroll-view class="detail" scroll-y>
        <view class="wrapper">
          <view class="basic">
            <view class="name">{{ good.name || "珍珠奶茶" }}</view>
            <view class="tips">{{
                good.content || "珍珠+奶茶美味好喝"
              }}
            </view>
          </view>
          <view class="properties">
            <view
              class="property"
              v-for="(item, index) in good.property"
              :key="index"
            >
              <view class="title">
                <text class="name">{{ item.name || "多糖" }}</text>
                <view class="desc" v-if="item.desc"
                >({{ item.desc || "标题" }})
                </view
                >
              </view>
              <view class="values">
                <view
                  class="value"
                  v-for="(value, key) in item.values"
                  :key="key"
                  :class="{ default: value.is_default }"
                  @tap="changePropertyDefault(index, key)"
                >
                  {{ value.value }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

      <view class="action">
        <view class="left">
          <view class="price">￥{{ good.price }}</view>
          <view class="props"> 多糖，少冰</view>
          <!-- <view class="props" v-if="getGoodSelectedProps(good)">
          {{ getGoodSelectedProps(good) }}11
        </view> -->
        </view>
        <view class="btn-group">
          <up-icon
            @click="handlePropertyReduce"
            name="minus-circle"
            size="20"
            color="#999"
          ></up-icon>
          <view class="number">{{ good.number || 1 }}</view>
          <up-icon
            name="plus-circle-fill"
            size="20"
            color="#f0ad4e"
            @click="handlePropertyAdd"
          ></up-icon>
        </view>
      </view>
    </view>
  </u-modal>
</template>
<script lang="ts" setup>

const props = defineProps({
  message: {
    type: String,
    default: "",
  },
  goodDetailModalVisible: {
    type: Boolean,
    default: false,
  },
  good: {
    type: Object,
    default: () => {
    },
  },
});
const emit = defineEmits(["close", "confirm", "handlePropertyAdd", "handlePropertyReduce"]);

const closeGoodDetailModal = () => {
  emit("close"); // 或者 emit('delete', 123);
};
const handleAddToCartInModal = () => {
  emit("confirm"); // 或者 emit('delete', 123);
};

const handlePropertyAdd = () => {
  emit("handlePropertyAdd");
};
const handlePropertyReduce = () => {
  emit("handlePropertyReduce");
};
console.log(">>>>detail");
</script>

<style lang="scss" scoped>
.modal-content {
  width: 100%;
  flex-direction: column;
}

.cover {
  width: 100%;
  height: 320rpx;
  padding: 30rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .image {
    width: 260rpx;
    height: 260rpx;
  }

  .btn-group {
    position: absolute;
    right: 10rpx;
    top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    image {
      width: 80rpx;
      height: 80rpx;
    }
  }
}

.detail {
  width: 100%;
  min-height: 1vh;
  max-height: calc(90vh - 320rpx - 80rpx - 120rpx);

  .wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .basic {
      padding: 0 20rpx 30rpx;
      display: flex;
      flex-direction: column;

      .name {
        font-size: $uni-font-size-base;
        color: $uni-text-color;
        margin-bottom: 10rpx;
      }

      .tips {
        font-size: $uni-font-size-sm;
        color: $uni-text-color-grey;
      }
    }

    .properties {
      width: 100%;
      //border-top: 2rpx solid $uni-bg-color-grey;
      padding: 10rpx 30rpx 0;
      display: flex;
      flex-direction: column;

      .property {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 30rpx;
        padding-bottom: -16rpx;

        .title {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 20rpx;

          .name {
            font-size: 26rpx;
            //color: $uni-text-color;
            margin-right: 20rpx;
          }

          .desc {
            flex: 1;
            //font-size: $font-size-sm;
            //color: $uni-color-primary;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .values {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          .value {
            border-radius: 8rpx;
            background-color: $uni-bg-color-grey;
            padding: 16rpx 30rpx;
            font-size: 26rpx;
            //	color: $uni-text-color-assist;
            margin-right: 16rpx;
            margin-bottom: 16rpx;

            &.default {
              background-color: $uni-color-warning;
              color: #fff;
            }
          }
        }
      }
    }
  }
}

.action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: $uni-bg-color-grey;
  height: 120rpx;
  padding: 0 26rpx;

  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 20rpx;
    // overflow: hidden;

    .price {
      //font-size: $uni-font-size-lg;
      color: $uni-text-color;
    }

    .props {
      color: $uni-text-color;
      font-size: 24rpx;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .btn-group {
    display: flex;
    align-items: center;
    justify-content: space-around;

    .number {
      //font-size: $uni-font-size;
      width: 44rpx;
      height: 44rpx;
      line-height: 44rpx;
      text-align: center;
    }

    .btn {
      padding: 0;
      //font-size: $uni-font-size;
      width: 44rpx;
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 100%;
    }
  }
}

.add-to-cart-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $uni-color-primary;
  //color: $uni-text-color-white;
  font-size: $uni-font-size-base;
  height: 80rpx;
  border-radius: 0 0 12rpx 12rpx;
}
</style>